<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>客户分析看板</title>
    <!-- 引入外部资源 -->
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="../font-awesome/css/all.min.css" rel="stylesheet">
    <script src="../chart.umd.min.js"></script>
    <link rel="stylesheet" href="style.css">

    <!-- Tailwind 配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#0FC6C2',
                        warning: '#FF7D00',
                        danger: '#F53F3F',
                        success: '#00B42A',
                        info: '#86909C',
                        light: '#F2F3F5',
                        dark: '#1D2129',
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                },
            }
        }
    </script>
</head>
<body class="font-inter bg-gray-50 text-dark">
<!-- 顶部导航栏 -->
<header class="bg-white fixed top-0 left-0 right-0 z-50 nav-shadow">
    <div class="container mx-auto px-4 py-3 flex items-center justify-between">
        <div class="flex items-center space-x-2">
            <div class="text-primary text-2xl">
                <i class="fa fa-bar-chart"></i>
            </div>
            <h1 class="text-xl font-bold text-primary">客户分析看板</h1>
        </div>

        <div class="flex items-center space-x-4">
            <div class="relative">
                <input type="text" placeholder="搜索客户..." class="pl-10 pr-4 py-2 rounded-full border border-gray-200 focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary transition-all">
                <i class="fa fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
            </div>

            <div class="relative">
                <button class="flex items-center space-x-1 text-gray-600 hover:text-primary transition-colors">
                    <i class="fa fa-bell text-lg"></i>
                    <span class="absolute -top-1 -right-1 bg-danger text-white text-xs rounded-full h-4 w-4 flex items-center justify-center">3</span>
                </button>
            </div>

            <div class="flex items-center space-x-2">
                <img src="../public/image/user.jpg" alt="用户头像" class="h-8 w-8 rounded-full object-cover border-2 border-primary">
                <span class="text-sm font-medium">管理员</span>
            </div>
        </div>
    </div>
</header>

<!-- 侧边栏导航 -->
<aside class="fixed top-0 left-0 bottom-0 w-64 bg-white pt-16 nav-shadow z-40 transition-all duration-300 ease-in-out transform">
    <div class="h-full overflow-y-auto scrollbar-hide">
        <nav class="p-4 space-y-1">
            <div class="text-xs uppercase text-gray-400 font-semibold mb-2 pl-2">主菜单</div>

            <a href="#" class="flex items-center space-x-3 px-3 py-2.5 rounded-lg bg-primary/10 text-primary font-medium">
                <i class="fa fa-dashboard text-lg w-5 text-center"></i>
                <span>RFM驾驶舱</span>
            </a>

            <a href="#" class="flex items-center space-x-3 px-3 py-2.5 rounded-lg text-gray-600 hover:bg-gray-100 transition-colors">
                <i class="fa fa-users text-lg w-5 text-center"></i>
                <span>客户管理</span>
            </a>

            <a href="#" class="flex items-center space-x-3 px-3 py-2.5 rounded-lg text-gray-600 hover:bg-gray-100 transition-colors">
                <i class="fa fa-shopping-cart text-lg w-5 text-center"></i>
                <span>订单管理</span>
            </a>

            <a href="#" class="flex items-center space-x-3 px-3 py-2.5 rounded-lg text-gray-600 hover:bg-gray-100 transition-colors">
                <i class="fa fa-line-chart text-lg w-5 text-center"></i>
                <span>销售分析</span>
            </a>

            <a href="#" class="flex items-center space-x-3 px-3 py-2.5 rounded-lg text-gray-600 hover:bg-gray-100 transition-colors">
                <i class="fa fa-cog text-lg w-5 text-center"></i>
                <span>系统设置</span>
            </a>

            <div class="text-xs uppercase text-gray-400 font-semibold mb-2 mt-6 pl-2">分析维度</div>

            <a href="#" class="flex items-center space-x-3 px-3 py-2.5 rounded-lg text-gray-600 hover:bg-gray-100 transition-colors">
                <i class="fa fa-calendar text-lg w-5 text-center"></i>
                <span>按时间分析</span>
            </a>

            <a href="#" class="flex items-center space-x-3 px-3 py-2.5 rounded-lg text-gray-600 hover:bg-gray-100 transition-colors">
                <i class="fa fa-map-marker text-lg w-5 text-center"></i>
                <span>按地区分析</span>
            </a>

            <a href="#" class="flex items-center space-x-3 px-3 py-2.5 rounded-lg text-gray-600 hover:bg-gray-100 transition-colors">
                <i class="fa fa-briefcase text-lg w-5 text-center"></i>
                <span>按行业分析</span>
            </a>

            <a href="#" class="flex items-center space-x-3 px-3 py-2.5 rounded-lg text-gray-600 hover:bg-gray-100 transition-colors">
                <i class="fa fa-sitemap text-lg w-5 text-center"></i>
                <span>按客户类型</span>
            </a>
        </nav>
    </div>
</aside>

<!-- 主内容区 -->
<main class="pt-16 pb-10 pl-64 min-h-screen">
    <div class="container mx-auto px-4 py-6">
        <!-- 筛选条件区域 -->
        <div class="bg-white rounded-xl p-4 mb-6 card-shadow">
            <div class="flex flex-wrap items-center justify-between gap-4">
                <div class="flex flex-wrap items-center gap-4">
                    <div class="flex items-center">
                        <span class="text-gray-600 mr-2">时间范围:</span>
                        <select id="timeRange" class="px-3 py-2 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary">
                            <option value="week">最近7天</option>
                            <option value="month" selected>最近30天</option>
                            <option value="quarter">最近90天</option>
                            <option value="year">最近12个月</option>
                            <option value="custom">自定义...</option>
                        </select>
                    </div>

                    <div class="flex items-center">
                        <span class="text-gray-600 mr-2">客户地区:</span>
                        <select id="region" class="px-3 py-2 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary">
                            <option value="all" selected>全部地区</option>
                            <option value="east">华东</option>
                            <option value="south">华南</option>
                            <option value="north">华北</option>
                            <option value="west">西北</option>
                            <option value="central">华中</option>
                        </select>
                    </div>

                    <div class="flex items-center">
                        <span class="text-gray-600 mr-2">客户行业:</span>
                        <select id="industry" class="px-3 py-2 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary">
                            <option value="all" selected>全部行业</option>
                            <option value="tech">科技</option>
                            <option value="retail">零售</option>
                            <option value="finance">金融</option>
                            <option value="manufacture">制造</option>
                            <option value="service">服务</option>
                        </select>
                    </div>

                    <div class="flex items-center">
                        <span class="text-gray-600 mr-2">客户类型:</span>
                        <select id="customerType" class="px-3 py-2 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary">
                            <option value="all" selected>全部类型</option>
                            <option value="vip">VIP客户</option>
                            <option value="potential">潜在客户</option>
                            <option value="general">普通客户</option>
                            <option value="lost">流失客户</option>
                        </select>
                    </div>
                </div>

                <div class="flex items-center">
                    <button id="applyFilter" class="bg-primary hover:bg-primary/90 text-white px-4 py-2 rounded-lg transition-colors flex items-center">
                        <i class="fa fa-filter mr-2"></i>
                        <span>应用筛选</span>
                    </button>
                    <button id="resetFilter" class="ml-2 text-gray-600 hover:text-gray-800 px-4 py-2 rounded-lg transition-colors flex items-center">
                        <i class="fa fa-refresh mr-2"></i>
                        <span>重置</span>
                    </button>
                </div>
            </div>
        </div>

        <!-- 数据概览卡片 -->
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
            <div class="bg-white rounded-xl p-5 card-shadow hover-scale cursor-pointer" onclick="showKpiDetail('recency')">
                <div class="flex items-center justify-between mb-4">
                    <h3 class="text-gray-600 font-medium">平均最近消费天数</h3>
                    <span class="text-xs px-2 py-1 bg-success/10 text-success rounded-full">
              <i class="fa fa-arrow-down"></i> 5.2%
            </span>
                </div>
                <div class="flex items-end justify-between">
                    <div>
                        <p class="text-3xl font-bold">18.5</p>
                        <p class="text-gray-500 text-sm">天</p>
                    </div>
                    <div class="text-4xl text-primary">
                        <i class="fa fa-calendar"></i>
                    </div>
                </div>
            </div>

            <div class="bg-white rounded-xl p-5 card-shadow hover-scale cursor-pointer" onclick="showKpiDetail('frequency')">
                <div class="flex items-center justify-between mb-4">
                    <h3 class="text-gray-600 font-medium">客均消费频率</h3>
                    <span class="text-xs px-2 py-1 bg-success/10 text-success rounded-full">
              <i class="fa fa-arrow-up"></i> 3.8%
            </span>
                </div>
                <div class="flex items-end justify-between">
                    <div>
                        <p class="text-3xl font-bold">4.2</p>
                        <p class="text-gray-500 text-sm">次/月</p>
                    </div>
                    <div class="text-4xl text-secondary">
                        <i class="fa fa-repeat"></i>
                    </div>
                </div>
            </div>

            <div class="bg-white rounded-xl p-5 card-shadow hover-scale cursor-pointer" onclick="showKpiDetail('monetary')">
                <div class="flex items-center justify-between mb-4">
                    <h3 class="text-gray-600 font-medium">客均消费金额</h3>
                    <span class="text-xs px-2 py-1 bg-success/10 text-success rounded-full">
              <i class="fa fa-arrow-up"></i> 7.3%
            </span>
                </div>
                <div class="flex items-end justify-between">
                    <div>
                        <p class="text-3xl font-bold">¥3,850</p>
                        <p class="text-gray-500 text-sm">元/月</p>
                    </div>
                    <div class="text-4xl text-warning">
                        <i class="fa fa-rmb"></i>
                    </div>
                </div>
            </div>

            <div class="bg-white rounded-xl p-5 card-shadow hover-scale cursor-pointer" onclick="showKpiDetail('churn')">
                <div class="flex items-center justify-between mb-4">
                    <h3 class="text-gray-600 font-medium">潜在流失客户</h3>
                    <span class="text-xs px-2 py-1 bg-danger/10 text-danger rounded-full">
              <i class="fa fa-arrow-up"></i> 12.4%
            </span>
                </div>
                <div class="flex items-end justify-between">
                    <div>
                        <p class="text-3xl font-bold">246</p>
                        <p class="text-gray-500 text-sm">人</p>
                    </div>
                    <div class="text-4xl text-danger">
                        <i class="fa fa-exclamation-triangle"></i>
                    </div>
                </div>
            </div>
        </div>

        <!-- RFM总分趋势图 -->
        <div class="bg-white rounded-xl p-5 mb-6 card-shadow">
            <div class="flex items-center justify-between mb-4">
                <h2 class="text-lg font-semibold">RFM总分平均值趋势</h2>
                <div class="flex space-x-2">
                    <button class="text-xs px-3 py-1 border border-gray-200 rounded-full hover:bg-gray-100 transition-colors">
                        日趋势
                    </button>
                    <button class="text-xs px-3 py-1 border border-primary bg-primary/10 text-primary rounded-full">
                        月趋势
                    </button>
                    <button class="text-xs px-3 py-1 border border-gray-200 rounded-full hover:bg-gray-100 transition-colors">
                        季趋势
                    </button>
                </div>
            </div>
            <div class="h-64">
                <canvas id="rfmTrendChart"></canvas>
            </div>
        </div>

        <!-- 客户RFM分布与客户类型占比 -->
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
            <div class="bg-white rounded-xl p-5 card-shadow">
                <div class="flex items-center justify-between mb-4">
                    <h2 class="text-lg font-semibold">客户RFM分布</h2>
                    <div class="text-sm text-gray-500">
              <span class="inline-flex items-center mr-3">
                <span class="w-2 h-2 rounded-full bg-primary mr-1"></span>高价值客户
              </span>
                        <span class="inline-flex items-center">
                <span class="w-2 h-2 rounded-full bg-gray-300 mr-1"></span>普通客户
              </span>
                    </div>
                </div>
                <div class="h-72">
                    <canvas id="rfmScatterChart"></canvas>
                </div>
            </div>

            <div class="bg-white rounded-xl p-5 card-shadow">
                <div class="flex items-center justify-between mb-4">
                    <h2 class="text-lg font-semibold">客户类型占比</h2>
                    <button id="customerTypeDetailBtn" class="text-primary text-sm hover:underline">
                        查看详情 <i class="fa fa-arrow-right ml-1"></i>
                    </button>
                </div>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div class="h-72 flex items-center justify-center">
                        <canvas id="customerTypeChart"></canvas>
                    </div>
                    <div class="overflow-y-auto max-h-72 scrollbar-hide">
                        <table class="w-full">
                            <thead>
                            <tr class="border-b border-gray-200">
                                <th class="text-left py-2 text-sm font-medium text-gray-600">客户类型</th>
                                <th class="text-right py-2 text-sm font-medium text-gray-600">占比</th>
                                <th class="text-right py-2 text-sm font-medium text-gray-600">数量</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr class="border-b border-gray-100 hover:bg-gray-50 cursor-pointer" onclick="showCustomerDetail('vip')">
                                <td class="py-2 text-sm">重要价值客户</td>
                                <td class="py-2 text-sm text-right">25.3%</td>
                                <td class="py-2 text-sm text-right">1,265</td>
                            </tr>
                            <tr class="border-b border-gray-100 hover:bg-gray-50 cursor-pointer" onclick="showCustomerDetail('maintain')">
                                <td class="py-2 text-sm">重要保持客户</td>
                                <td class="py-2 text-sm text-right">18.7%</td>
                                <td class="py-2 text-sm text-right">935</td>
                            </tr>
                            <tr class="border-b border-gray-100 hover:bg-gray-50 cursor-pointer" onclick="showCustomerDetail('develop')">
                                <td class="py-2 text-sm">重要发展客户</td>
                                <td class="py-2 text-sm text-right">15.2%</td>
                                <td class="py-2 text-sm text-right">760</td>
                            </tr>
                            <tr class="border-b border-gray-100 hover:bg-gray-50 cursor-pointer" onclick="showCustomerDetail('retain')">
                                <td class="py-2 text-sm">重要挽留客户</td>
                                <td class="py-2 text-sm text-right">12.8%</td>
                                <td class="py-2 text-sm text-right">640</td>
                            </tr>
                            <tr class="border-b border-gray-100 hover:bg-gray-50 cursor-pointer" onclick="showCustomerDetail('general')">
                                <td class="py-2 text-sm">一般价值客户</td>
                                <td class="py-2 text-sm text-right">10.5%</td>
                                <td class="py-2 text-sm text-right">525</td>
                            </tr>
                            <tr class="hover:bg-gray-50 cursor-pointer" onclick="showCustomerDetail('low')">
                                <td class="py-2 text-sm">低价值客户</td>
                                <td class="py-2 text-sm text-right">17.5%</td>
                                <td class="py-2 text-sm text-right">875</td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <!-- 客户RFM对比雷达图与客户RFM热力图 -->
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
            <div class="bg-white rounded-xl p-5 card-shadow">
                <div class="flex items-center justify-between mb-4">
                    <h2 class="text-lg font-semibold">客户RFM对比</h2>
                    <select id="radarChartType" class="text-sm border border-gray-200 rounded-lg px-2 py-1 focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary">
                        <option value="all">全部类型对比</option>
                        <option value="vip">VIP与普通客户</option>
                        <option value="lost">潜在流失与正常客户</option>
                    </select>
                </div>
                <div class="h-72">
                    <canvas id="rfmRadarChart"></canvas>
                </div>
            </div>

            <div class="bg-white rounded-xl p-5 card-shadow">
                <div class="flex items-center justify-between mb-4">
                    <h2 class="text-lg font-semibold">客户RFM热力图</h2>
                    <div class="text-sm text-gray-500">
              <span class="inline-flex items-center mr-3">
                <span class="w-2 h-2 inline-block bg-gradient-to-r from-blue-100 to-blue-500 mr-1"></span>消费金额低
              </span>
                        <span class="inline-flex items-center">
                <span class="w-2 h-2 inline-block bg-gradient-to-r from-blue-500 to-blue-900 mr-1"></span>消费金额高
              </span>
                    </div>
                </div>
                <div class="h-72 flex items-center justify-center">
                    <div id="rfmHeatmap" class="grid grid-cols-6 gap-1 w-full max-w-md">
                        <div class="col-span-1 flex flex-col items-center justify-center">
                            <div class="text-sm font-medium mb-2">F评分</div>
                            <div class="h-10 flex items-center justify-center text-sm">5</div>
                            <div class="h-10 flex items-center justify-center text-sm">4</div>
                            <div class="h-10 flex items-center justify-center text-sm">3</div>
                            <div class="h-10 flex items-center justify-center text-sm">2</div>
                            <div class="h-10 flex items-center justify-center text-sm">1</div>
                        </div>
                        <div class="col-span-5 grid grid-cols-5 gap-1">
                            <div class="h-10 bg-blue-900 rounded-md flex items-center justify-center text-white text-xs hover:scale-110 transition-transform cursor-pointer tooltip" data-tooltip="R5F5: 平均消费 ¥8,650">R5F5</div>
                            <div class="h-10 bg-blue-800 rounded-md flex items-center justify-center text-white text-xs hover:scale-110 transition-transform cursor-pointer tooltip" data-tooltip="R5F4: 平均消费 ¥7,240">R5F4</div>
                            <div class="h-10 bg-blue-700 rounded-md flex items-center justify-center text-white text-xs hover:scale-110 transition-transform cursor-pointer tooltip" data-tooltip="R5F3: 平均消费 ¥5,980">R5F3</div>
                            <div class="h-10 bg-blue-600 rounded-md flex items-center justify-center text-white text-xs hover:scale-110 transition-transform cursor-pointer tooltip" data-tooltip="R5F2: 平均消费 ¥4,120">R5F2</div>
                            <div class="h-10 bg-blue-500 rounded-md flex items-center justify-center text-white text-xs hover:scale-110 transition-transform cursor-pointer tooltip" data-tooltip="R5F1: 平均消费 ¥2,850">R5F1</div>

                            <div class="h-10 bg-blue-800 rounded-md flex items-center justify-center text-white text-xs hover:scale-110 transition-transform cursor-pointer tooltip" data-tooltip="R4F5: 平均消费 ¥7,860">R4F5</div>
                            <div class="h-10 bg-blue-700 rounded-md flex items-center justify-center text-white text-xs hover:scale-110 transition-transform cursor-pointer tooltip" data-tooltip="R4F4: 平均消费 ¥6,450">R4F4</div>
                            <div class="h-10 bg-blue-600 rounded-md flex items-center justify-center text-white text-xs hover:scale-110 transition-transform cursor-pointer tooltip" data-tooltip="R4F3: 平均消费 ¥5,210">R4F3</div>
                            <div class="h-10 bg-blue-500 rounded-md flex items-center justify-center text-white text-xs hover:scale-110 transition-transform cursor-pointer tooltip" data-tooltip="R4F2: 平均消费 ¥3,870">R4F2</div>
                            <div class="h-10 bg-blue-400 rounded-md flex items-center justify-center text-white text-xs hover:scale-110 transition-transform cursor-pointer tooltip" data-tooltip="R4F1: 平均消费 ¥2,450">R4F1</div>

                            <div class="h-10 bg-blue-700 rounded-md flex items-center justify-center text-white text-xs hover:scale-110 transition-transform cursor-pointer tooltip" data-tooltip="R3F5: 平均消费 ¥6,750">R3F5</div>
                            <div class="h-10 bg-blue-600 rounded-md flex items-center justify-center text-white text-xs hover:scale-110 transition-transform cursor-pointer tooltip" data-tooltip="R3F4: 平均消费 ¥5,320">R3F4</div>
                            <div class="h-10 bg-blue-500 rounded-md flex items-center justify-center text-white text-xs hover:scale-110 transition-transform cursor-pointer tooltip" data-tooltip="R3F3: 平均消费 ¥4,180">R3F3</div>
                            <div class="h-10 bg-blue-400 rounded-md flex items-center justify-center text-white text-xs hover:scale-110 transition-transform cursor-pointer tooltip" data-tooltip="R3F2: 平均消费 ¥3,240">R3F2</div>
                            <div class="h-10 bg-blue-300 rounded-md flex items-center justify-center text-white text-xs hover:scale-110 transition-transform cursor-pointer tooltip" data-tooltip="R3F1: 平均消费 ¥1,980">R3F1</div>

                            <div class="h-10 bg-blue-600 rounded-md flex items-center justify-center text-white text-xs hover:scale-110 transition-transform cursor-pointer tooltip" data-tooltip="R2F5: 平均消费 ¥5,680">R2F5</div>
                            <div class="h-10 bg-blue-500 rounded-md flex items-center justify-center text-white text-xs hover:scale-110 transition-transform cursor-pointer tooltip" data-tooltip="R2F4: 平均消费 ¥4,530">R2F4</div>
                            <div class="h-10 bg-blue-400 rounded-md flex items-center justify-center text-white text-xs hover:scale-110 transition-transform cursor-pointer tooltip" data-tooltip="R2F3: 平均消费 ¥3,470">R2F3</div>
                            <div class="h-10 bg-blue-300 rounded-md flex items-center justify-center text-white text-xs hover:scale-110 transition-transform cursor-pointer tooltip" data-tooltip="R2F2: 平均消费 ¥2,650">R2F2</div>
                            <div class="h-10 bg-blue-200 rounded-md flex items-center justify-center text-white text-xs hover:scale-110 transition-transform cursor-pointer tooltip" data-tooltip="R2F1: 平均消费 ¥1,560">R2F1</div>

                            <div class="h-10 bg-blue-500 rounded-md flex items-center justify-center text-white text-xs hover:scale-110 transition-transform cursor-pointer tooltip" data-tooltip="R1F5: 平均消费 ¥4,920">R1F5</div>
                            <div class="h-10 bg-blue-400 rounded-md flex items-center justify-center text-white text-xs hover:scale-110 transition-transform cursor-pointer tooltip" data-tooltip="R1F4: 平均消费 ¥3,870">R1F4</div>
                            <div class="h-10 bg-blue-300 rounded-md flex items-center justify-center text-white text-xs hover:scale-110 transition-transform cursor-pointer tooltip" data-tooltip="R1F3: 平均消费 ¥2,780">R1F3</div>
                            <div class="h-10 bg-blue-200 rounded-md flex items-center justify-center text-white text-xs hover:scale-110 transition-transform cursor-pointer tooltip" data-tooltip="R1F2: 平均消费 ¥1,890">R1F2</div>
                            <div class="h-10 bg-blue-100 rounded-md flex items-center justify-center text-gray-700 text-xs hover:scale-110 transition-transform cursor-pointer tooltip" data-tooltip="R1F1: 平均消费 ¥980">R1F1</div>
                        </div>
                        <div class="col-span-6 mt-4 flex items-center">
                            <div class="text-sm font-medium mr-2">R评分</div>
                            <div class="flex-1 grid grid-cols-5 gap-1">
                                <div class="text-center text-sm">1</div>
                                <div class="text-center text-sm">2</div>
                                <div class="text-center text-sm">3</div>
                                <div class="text-center text-sm">4</div>
                                <div class="text-center text-sm">5</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 消费贡献度分析 -->
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
            <div class="bg-white rounded-xl p-5 card-shadow">
                <div class="flex items-center justify-between mb-4">
                    <h2 class="text-lg font-semibold">客户类型消费贡献度</h2>
                    <div class="text-xs text-gray-500">
                        展示 "20% 客户类型贡献 80% 销售额" 的帕累托法则
                    </div>
                </div>
                <div class="h-72">
                    <canvas id="customerTypeParetoChart"></canvas>
                </div>
            </div>

            <div class="bg-white rounded-xl p-5 card-shadow">
                <div class="flex items-center justify-between mb-4">
                    <h2 class="text-lg font-semibold">高价值客户TOP10</h2>
                    <select id="topCustomerType" class="text-sm border border-gray-200 rounded-lg px-2 py-1 focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary">
                        <option value="amount">消费金额TOP10</option>
                        <option value="frequency">消费频率TOP10</option>
                        <option value="recent">最近消费TOP10</option>
                    </select>
                </div>
                <div class="overflow-x-auto">
                    <table class="w-full">
                        <thead>
                        <tr class="border-b border-gray-200">
                            <th class="text-left py-3 px-2 text-sm font-medium text-gray-600">排名</th>
                            <th class="text-left py-3 px-2 text-sm font-medium text-gray-600">客户名称</th>
                            <th class="text-left py-3 px-2 text-sm font-medium text-gray-600">客户类型</th>
                            <th class="text-right py-3 px-2 text-sm font-medium text-gray-600">消费金额</th>
                            <th class="text-right py-3 px-2 text-sm font-medium text-gray-600">消费频率</th>
                            <th class="text-right py-3 px-2 text-sm font-medium text-gray-600">最近消费</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr class="border-b border-gray-100 hover:bg-gray-50">
                            <td class="py-3 px-2 text-sm">1</td>
                            <td class="py-3 px-2 text-sm font-medium">恒业科技有限公司</td>
                            <td class="py-3 px-2 text-sm">
                                <span class="px-2 py-1 bg-primary/10 text-primary text-xs rounded-full">VIP客户</span>
                            </td>
                            <td class="py-3 px-2 text-sm text-right">¥286,500</td>
                            <td class="py-3 px-2 text-sm text-right">12次</td>
                            <td class="py-3 px-2 text-sm text-right">2025-06-18</td>
                        </tr>
                        <tr class="border-b border-gray-100 hover:bg-gray-50">
                            <td class="py-3 px-2 text-sm">2</td>
                            <td class="py-3 px-2 text-sm font-medium">星辰贸易有限公司</td>
                            <td class="py-3 px-2 text-sm">
                                <span class="px-2 py-1 bg-primary/10 text-primary text-xs rounded-full">VIP客户</span>
                            </td>
                            <td class="py-3 px-2 text-sm text-right">¥254,300</td>
                            <td class="py-3 px-2 text-sm text-right">10次</td>
                            <td class="py-3 px-2 text-sm text-right">2025-06-15</td>
                        </tr>
                        <tr class="border-b border-gray-100 hover:bg-gray-50">
                            <td class="py-3 px-2 text-sm">3</td>
                            <td class="py-3 px-2 text-sm font-medium">未来金融服务公司</td>
                            <td class="py-3 px-2 text-sm">
                                <span class="px-2 py-1 bg-primary/10 text-primary text-xs rounded-full">VIP客户</span>
                            </td>
                            <td class="py-3 px-2 text-sm text-right">¥218,700</td>
                            <td class="py-3 px-2 text-sm text-right">8次</td>
                            <td class="py-3 px-2 text-sm text-right">2025-06-20</td>
                        </tr>
                        <tr class="border-b border-gray-100 hover:bg-gray-50">
                            <td class="py-3 px-2 text-sm">4</td>
                            <td class="py-3 px-2 text-sm font-medium">环球制造集团</td>
                            <td class="py-3 px-2 text-sm">
                                <span class="px-2 py-1 bg-primary/10 text-primary text-xs rounded-full">VIP客户</span>
                            </td>
                            <td class="py-3 px-2 text-sm text-right">¥195,200</td>
                            <td class="py-3 px-2 text-sm text-right">7次</td>
                            <td class="py-3 px-2 text-sm text-right">2025-06-12</td>
                        </tr>
                        <tr class="border-b border-gray-100 hover:bg-gray-50">
                            <td class="py-3 px-2 text-sm">5</td>
                            <td class="py-3 px-2 text-sm font-medium">绿色能源科技有限公司</td>
                            <td class="py-3 px-2 text-sm">
                                <span class="px-2 py-1 bg-primary/10 text-primary text-xs rounded-full">VIP客户</span>
                            </td>
                            <td class="py-3 px-2 text-sm text-right">¥182,400</td>
                            <td class="py-3 px-2 text-sm text-right">9次</td>
                            <td class="py-3 px-2 text-sm text-right">2025-06-19</td>
                        </tr>
                        <tr class="border-b border-gray-100 hover:bg-gray-50">
                            <td class="py-3 px-2 text-sm">6</td>
                            <td class="py-3 px-2 text-sm font-medium">创新电子有限公司</td>
                            <td class="py-3 px-2 text-sm">
                                <span class="px-2 py-1 bg-secondary/10 text-secondary text-xs rounded-full">重要保持客户</span>
                            </td>
                            <td class="py-3 px-2 text-sm text-right">¥156,800</td>
                            <td class="py-3 px-2 text-sm text-right">6次</td>
                            <td class="py-3 px-2 text-sm text-right">2025-06-08</td>
                        </tr>
                        <tr class="border-b border-gray-100 hover:bg-gray-50">
                            <td class="py-3 px-2 text-sm">7</td>
                            <td class="py-3 px-2 text-sm font-medium">智慧物流有限公司</td>
                            <td class="py-3 px-2 text-sm">
                                <span class="px-2 py-1 bg-secondary/10 text-secondary text-xs rounded-full">重要保持客户</span>
                            </td>
                            <td class="py-3 px-2 text-sm text-right">¥145,300</td>
                            <td class="py-3 px-2 text-sm text-right">5次</td>
                            <td class="py-3 px-2 text-sm text-right">2025-06-05</td>
                        </tr>
                        <tr class="border-b border-gray-100 hover:bg-gray-50">
                            <td class="py-3 px-2 text-sm">8</td>
                            <td class="py-3 px-2 text-sm font-medium">卓越教育集团</td>
                            <td class="py-3 px-2 text-sm">
                                <span class="px-2 py-1 bg-secondary/10 text-secondary text-xs rounded-full">重要保持客户</span>
                            </td>
                            <td class="py-3 px-2 text-sm text-right">¥132,700</td>
                            <td class="py-3 px-2 text-sm text-right">4次</td>
                            <td class="py-3 px-2 text-sm text-right">2025-06-03</td>
                        </tr>
                        <tr class="border-b border-gray-100 hover:bg-gray-50">
                            <td class="py-3 px-2 text-sm">9</td>
                            <td class="py-3 px-2 text-sm font-medium">康泰医疗设备有限公司</td>
                            <td class="py-3 px-2 text-sm">
                                <span class="px-2 py-1 bg-warning/10 text-warning text-xs rounded-full">重要发展客户</span>
                            </td>
                            <td class="py-3 px-2 text-sm text-right">¥125,600</td>
                            <td class="py-3 px-2 text-sm text-right">3次</td>
                            <td class="py-3 px-2 text-sm text-right">2025-06-01</td>
                        </tr>
                        <tr class="hover:bg-gray-50">
                            <td class="py-3 px-2 text-sm">10</td>
                            <td class="py-3 px-2 text-sm font-medium">星辰百货连锁</td>
                            <td class="py-3 px-2 text-sm">
                                <span class="px-2 py-1 bg-warning/10 text-warning text-xs rounded-full">重要发展客户</span>
                            </td>
                            <td class="py-3 px-2 text-sm text-right">¥118,900</td>
                            <td class="py-3 px-2 text-sm text-right">5次</td>
                            <td class="py-3 px-2 text-sm text-right">2025-05-28</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <!-- 潜在流失客户预警 -->
        <div class="bg-white rounded-xl p-5 card-shadow">
            <div class="flex items-center justify-between mb-4">
                <h2 class="text-lg font-semibold">潜在流失客户预警</h2>
                <div class="flex items-center space-x-2">
            <span class="text-xs px-2 py-1 bg-danger/10 text-danger rounded-full">
              需紧急挽回
            </span>
                    <button class="text-primary text-sm hover:underline">
                        导出名单 <i class="fa fa-download ml-1"></i>
                    </button>
                </div>
            </div>
            <div class="overflow-x-auto">
                <table class="w-full">
                    <thead>
                    <tr class="border-b border-gray-200">
                        <th class="text-left py-3 px-2 text-sm font-medium text-gray-600">客户名称</th>
                        <th class="text-left py-3 px-2 text-sm font-medium text-gray-600">客户类型</th>
                        <th class="text-center py-3 px-2 text-sm font-medium text-gray-600">最近消费</th>
                        <th class="text-center py-3 px-2 text-sm font-medium text-gray-600">消费频率</th>
                        <th class="text-center py-3 px-2 text-sm font-medium text-gray-600">消费金额</th>
                        <th class="text-center py-3 px-2 text-sm font-medium text-gray-600">RFM评分</th>
                        <th class="text-center py-3 px-2 text-sm font-medium text-gray-600">预警等级</th>
                        <th class="text-center py-3 px-2 text-sm font-medium text-gray-600">操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr class="border-b border-gray-100 hover:bg-gray-50">
                        <td class="py-3 px-2 text-sm font-medium">东方科技有限公司</td>
                        <td class="py-3 px-2 text-sm">
                            <span class="px-2 py-1 bg-primary/10 text-primary text-xs rounded-full">VIP客户</span>
                        </td>
                        <td class="py-3 px-2 text-sm text-center">2025-04-15</td>
                        <td class="py-3 px-2 text-sm text-center">8次/月</td>
                        <td class="py-3 px-2 text-sm text-center">¥45,600</td>
                        <td class="py-3 px-2 text-sm text-center">R1F5M5</td>
                        <td class="py-3 px-2 text-sm text-center">
                            <span class="px-2 py-1 bg-danger/10 text-danger text-xs rounded-full">高</span>
                        </td>
                        <td class="py-3 px-2 text-sm text-center">
                            <button class="text-primary hover:text-primary/80">
                                <i class="fa fa-envelope-o"></i> 联系
                            </button>
                        </td>
                    </tr>
                    <tr class="border-b border-gray-100 hover:bg-gray-50">
                        <td class="py-3 px-2 text-sm font-medium">南方贸易集团</td>
                        <td class="py-3 px-2 text-sm">
                            <span class="px-2 py-1 bg-secondary/10 text-secondary text-xs rounded-full">重要保持客户</span>
                        </td>
                        <td class="py-3 px-2 text-sm text-center">2025-04-22</td>
                        <td class="py-3 px-2 text-sm text-center">6次/月</td>
                        <td class="py-3 px-2 text-sm text-center">¥38,200</td>
                        <td class="py-3 px-2 text-sm text-center">R1F4M4</td>
                        <td class="py-3 px-2 text-sm text-center">
                            <span class="px-2 py-1 bg-danger/10 text-danger text-xs rounded-full">高</span>
                        </td>
                        <td class="py-3 px-2 text-sm text-center">
                            <button class="text-primary hover:text-primary/80">
                                <i class="fa fa-envelope-o"></i> 联系
                            </button>
                        </td>
                    </tr>
                    <tr class="border-b border-gray-100 hover:bg-gray-50">
                        <td class="py-3 px-2 text-sm font-medium">金鑫金融服务公司</td>
                        <td class="py-3 px-2 text-sm">
                            <span class="px-2 py-1 bg-primary/10 text-primary text-xs rounded-full">VIP客户</span>
                        </td>
                        <td class="py-3 px-2 text-sm text-center">2025-04-28</td>
                        <td class="py-3 px-2 text-sm text-center">7次/月</td>
                        <td class="py-3 px-2 text-sm text-center">¥42,500</td>
                        <td class="py-3 px-2 text-sm text-center">R1F5M4</td>
                        <td class="py-3 px-2 text-sm text-center">
                            <span class="px-2 py-1 bg-warning/10 text-warning text-xs rounded-full">中</span>
                        </td>
                        <td class="py-3 px-2 text-sm text-center">
                            <button class="text-primary hover:text-primary/80">
                                <i class="fa fa-envelope-o"></i> 联系
                            </button>
                        </td>
                    </tr>
                    <tr class="border-b border-gray-100 hover:bg-gray-50">
                        <td class="py-3 px-2 text-sm font-medium">环宇制造有限公司</td>
                        <td class="py-3 px-2 text-sm">
                            <span class="px-2 py-1 bg-secondary/10 text-secondary text-xs rounded-full">重要保持客户</span>
                        </td>
                        <td class="py-3 px-2 text-sm text-center">2025-05-05</td>
                        <td class="py-3 px-2 text-sm text-center">5次/月</td>
                        <td class="py-3 px-2 text-sm text-center">¥36,800</td>
                        <td class="py-3 px-2 text-sm text-center">R2F4M4</td>
                        <td class="py-3 px-2 text-sm text-center">
                            <span class="px-2 py-1 bg-warning/10 text-warning text-xs rounded-full">中</span>
                        </td>
                        <td class="py-3 px-2 text-sm text-center">
                            <button class="text-primary hover:text-primary/80">
                                <i class="fa fa-envelope-o"></i> 联系
                            </button>
                        </td>
                    </tr>
                    <tr class="hover:bg-gray-50">
                        <td class="py-3 px-2 text-sm font-medium">健康医疗科技有限公司</td>
                        <td class="py-3 px-2 text-sm">
                            <span class="px-2 py-1 bg-warning/10 text-warning text-xs rounded-full">重要发展客户</span>
                        </td>
                        <td class="py-3 px-2 text-sm text-center">2025-05-10</td>
                        <td class="py-3 px-2 text-sm text-center">4次/月</td>
                        <td class="py-3 px-2 text-sm text-center">¥32,400</td>
                        <td class="py-3 px-2 text-sm text-center">R2F3M4</td>
                        <td class="py-3 px-2 text-sm text-center">
                            <span class="px-2 py-1 bg-info/10 text-info text-xs rounded-full">低</span>
                        </td>
                        <td class="py-3 px-2 text-sm text-center">
                            <button class="text-primary hover:text-primary/80">
                                <i class="fa fa-envelope-o"></i> 联系
                            </button>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
            <div class="mt-4 flex justify-between items-center">
                <div class="text-sm text-gray-500">
                    显示 1-5 条，共 246 条
                </div>
                <div class="flex space-x-1">
                    <button class="w-8 h-8 flex items-center justify-center rounded border border-gray-200 text-gray-500 hover:bg-gray-100">
                        <i class="fa fa-angle-left"></i>
                    </button>
                    <button class="w-8 h-8 flex items-center justify-center rounded border border-primary bg-primary text-white">1</button>
                    <button class="w-8 h-8 flex items-center justify-center rounded border border-gray-200 hover:bg-gray-100">2</button>
                    <button class="w-8 h-8 flex items-center justify-center rounded border border-gray-200 hover:bg-gray-100">3</button>
                    <button class="w-8 h-8 flex items-center justify-center rounded border border-gray-200 hover:bg-gray-100">
                        <i class="fa fa-angle-right"></i>
                    </button>
                </div>
            </div>
        </div>
    </div>
</main>

<!-- 穿透查询模态框 -->
<div id="detailModal" class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden flex items-center justify-center">
    <div class="bg-white rounded-xl w-full max-w-4xl max-h-[90vh] overflow-hidden flex flex-col">
        <div class="p-5 border-b border-gray-200 flex justify-between items-center">
            <h3 class="text-lg font-semibold" id="modalTitle">客户详情</h3>
            <button id="closeModal" class="text-gray-500 hover:text-gray-700">
                <i class="fa fa-times"></i>
            </button>
        </div>
        <div class="p-5 overflow-y-auto flex-1" id="modalContent">
            <!-- 这里将通过JavaScript动态填充内容 -->
        </div>
        <div class="p-5 border-t border-gray-200 flex justify-end">
            <button id="closeModalBtn" class="px-4 py-2 bg-gray-200 hover:bg-gray-300 rounded-lg transition-colors">
                关闭
            </button>
        </div>
    </div>
</div>

<!-- JavaScript 代码 -->
<script src="script.js"></script>
</body>
</html>